<template>
    <div class="user_address_page">
        <ul>
            <li>
                <div class="left_wrap">收货人：</div>
                <div class="right_wrap">
                    <input v-model='user_address.consumer_name'>
                </div>
            </li>
            <li>
                <div class="left_wrap">联系电话：</div>
                <div class="right_wrap">
                    <input v-model='user_address.consumer_mobile_phone'>
                </div>
            </li>
            <li>
                <div class="left_wrap">所在地区：</div>
                <div class="right_wrap"  @click='postAddressShow();'>
                    <input  @click='postAddressShow();'  v-model="userAddInput">
                </div>
            </li>
            <li>
                <div class="left_wrap">街道：</div>
                <div class="right_wrap">
                    <input v-model='user_address.consumer_street'>
                </div>
            </li>
            <li>
                <div class="left_wrap">详细地址：</div>
                <div class="right_wrap">
                    <input v-model='user_address.consumer_detail_address'>
                </div>
            </li>
        </ul>
        <div class="confirm_btn" @click="postGiftReceived();">确认领取</div>
        <transition name="fade">
            <threeAddress v-show="cityAddressShow"></threeAddress>
        </transition>
    </div>
    
</template>
<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s
}
.fade-enter, .fade-leave-to /* .fade-leave-active 在 <2.1.8 中 */ {
  opacity: 0
}
</style>
<script>
import threeAddress from '@/components/address.vue'
import { mapState } from 'vuex'
import api from '@/api/api'
export default {
    name: 'userAddress',
    data() {
        return {

            userAddress: this.Province,
            success_img: require('assets/images/icon_tick.png'),
            default_qrcode: require('assets/images/qrcode.jpg'),
            user_address: {
                consumer_name: '',
                consumer_mobile_phone: '',
                consumer_street: '',
                consumer_detail_address: ''
            }
        }
    },
    components : {
         threeAddress
    },
    methods: {
        postStepChange: function (val) {

        },
        postAddressShow :function(){
            this.$store.commit('setAddressShow' , true);
        },
        postGiftReceived: function(){
            let _self = this;
            let add_params= {
                functioncode:'receive_gift',
                gift_id: this.$route.params.gift_id,
                consumer_name: this.user_address.consumer_name,
                consumer_mobile_phone: this.user_address.consumer_mobile_phone,
                consumer_city: this.userAddInput,
                consumer_street: this.user_address.consumer_street,
                consumer_detail_address: this.user_address.consumer_detail_address,
            };
            if(this.user_address.consumer_name == ''){
                _self.$toast('为确保您收货无误，收货人姓名不能为空哦！');
                return;
            }
            if(this.user_address.consumer_mobile_phone == ''){
                _self.$toast('为确保您收货无误，收货人联系电话不能为空哦！');
                return;
            }
            if(this.user_address.userAddInput == ''){
                _self.$toast('为确保您收货无误，请选择收货人所在城市！');
                return;
            }
            if(this.user_address.consumer_street == ''){
                _self.$toast('为确保您收货无误，请输入收货人所在街道！');
                return;
            }
            if(this.user_address.consumer_detail_address == ''){
                _self.$toast('为确保您收货无误，请准确的输入您的详细地址！');
                return;
            }
            api.post(add_params).then(function (res) {
                if(res.data.returncode === '000000' && res.data.record){
                    _self.$router.push({
                        name: 'gift_received',
                        query: { is_ok: 'ok' }
                    });
                }else{
                    _self.$router.push({
                        name: 'gift_received',
                        query: { is_ok: 'sorry' }
                    });
                }
            });

        }
    },
    computed: {
        ...mapState({
            Province: state => state.Province,
            City: state => state.City,
            District: state => state.District,
            cityAddressShow:  state => state.city_show,
        }),
        userAddInput () {
            return this.$store.state.Province + ' ' + this.$store.state.City + ' ' + this.$store.state.District  
        }
    },
}
</script>

<style scoped>
body {
    background: #f2f2f2;
    margin: 0;
}
</style>
